<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="user">
        <div class="userNav">
            <div>
                <div><span class="glyphicon glyphicon-user"></span></div>
                <div>用户管理</div>
            </div>
            <div class="userNavT">
                <div>
                    <div><span class="glyphicon glyphicon-user"></span></div>
                    <div>当前位置：</div>
                </div>
                <div>
                    用户管理
                </div>
            </div>
        </div>
        <div class="userDetails">
            <div class="datails" v-loading.body="loading" element-loading-text="拼命加载中">
                <ul>
                    <li class="firstLi">
                        <div>头像</div>
                        <div>用户昵称</div>
                        <div>积分</div>
                        <div>联系电话</div>
                        <div>注册时间</div>
                        <div>操作</div>
                    </li>
                    <li v-if="nullShow" class="nullLi">
                        <div>暂时没有数据</div>
                    </li>
                    <li v-else v-for="(use,index) in users" class="detaLi">
                        <div><img :src="use.avatar" alt=""></div>
                        <div>{{use.nickName | strFun}}</div>
                        <div>{{use.scores}}</div>
                        <div>{{use.mobile | strFun}}</div>
                        <div>{{use.ctime | ctimeFun}}</div>
                        <div>
                            <small @click="detailClick(index)"><span class="glyphicon glyphicon-th-list"></span>详情</small>
                        </div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            <el-pagination @size-change="handleSizeChange" :current-page="currentPage" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
                                :page-size="pageSizeNum" layout="total, sizes, prev, pager, next" :total="totalNum">
                                </el-pagination>
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--用户详情弹窗-->
        <div :class="{detailsPopup:isDetailsPopup,showdeta:isShowDeta}">
            <transition name="slide-fade">
                <div class="detailMain" v-show="detailShow">
                    <div class="popupTitle">
                        <h2>商铺详情</h2>
                        <div @click="callClick">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addPone addPonImg">
                        <div>用户头像：</div>
                        <div class="headImgSm">
                            <img :src="storeObj.avatar" alt="">
                        </div>
                        <div id="headImgS" class="headImgBg">
                            <img :src="storeObj.avatar" alt="">
                        </div>
                    </div>
                    <div class="addPone">
                        <div>用户昵称：</div>
                        <div>{{storeObj.nickName}}</div>
                    </div>
                    <div class="addPone">
                        <div>积分：</div>
                        <div>{{storeObj.scores}}</div>
                    </div>
                    <div class="addPone">
                        <div>联系电话：</div>
                        <div>{{storeObj.mobile | strFun}}</div>
                    </div>
                    <div class="addPone">
                        <div>注册时间：</div>
                        <div>{{storeObj.ctime | ctimeFun}}</div>
                    </div>
                    <div class="addPone">
                        <div>备注：</div>
                        <div>{{storeObj.comment | strFun}}</div>
                    </div>
                    <div class="addOper">
                        <button @click="callClick">确认</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'user',
        data() {
            return {
                users: [
                ],
                pageSizeNum: 10,
                totalNum: 0,
                currentPage: 1,
                loading: false,
                nullShow: true,
                isDetailsPopup: true,
                isShowDeta: true,
                detailShow: false,
                storeObj: {
                    amount: '',
                    avatar: '',
                    ctime: '',
                    id: '',
                    mobile: '',
                    nickName: '',
                    openId: '',
                    otherCode: '',
                    pwd: '',
                    scores: '',
                    selfCode: ''
                },
            }
        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "  " + hour + ":" + minute;
            },
            strFun: function (val) {
                if (val) {
                    return val
                } else {
                    return '无'
                }
            }
        },
        created: function () {
            // 判断用户是否登录
            var userName = sessionStorage.getItem('userName')
        },
        methods: {
            // 设置每页个数
            handleSizeChange(val) {
                var self = this;
                self.pageSizeNum = val
                self.loading = true
                var self = this;
                self.loading = true
                self.getUserAll({
                    pageSize: val,
                    number: 1
                }).then((data) => {
                    console.log(data)
                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            self.users = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 点击分页
            handleCurrentChange(val) {
                var self = this;
                self.loading = true
                self.getUserAll({
                    pageSize: self.pageSizeNum,
                    number: val
                }).then((data) => {
                    console.log(data)
                    self.loading = false
                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            self.users = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 用户详情弹出框
            detailClick(index) {
                this.isShowDeta = false
                this.detailShow = true
                var self = this;
                this.getUserOne({
                    id: self.users[index].id
                }).then((data) => {

                    if (data.data.code == "200") {
                        self.storeObj = data.data.data
                    }
                }).catch(msg => console.log(msg))
            },
            // 关闭用户详情弹出框
            callClick() {
                this.isShowDeta = true
                this.detailShow = false
                this.storeObj.amount = ''
                this.storeObj.avatar = ''
                this.storeObj.ctime = ''
                this.storeObj.id = ''
                this.storeObj.nickName = ''
                this.storeObj.openId = ''
                this.storeObj.otherCode = ''
                this.storeObj.pwd = ''
                this.storeObj.scores = ''
                this.storeObj.selfCode = ''
            },
            ...mapActions(['getUserAll','getUserOne'])
        }
    }

</script>
<style scoped src="../../assets/css/user.css">

</style>